<template>
	<div class="login">
		<div class="login_header">
			<div class="page-inner head">
				<div class="logo">
					<NuxtLink to="/"><img src="@/public/uploadfiles/logo.png" alt=""></NuxtLink>
				</div>
				<span class="f24 font-b">AITEP</span>
			</div>
		</div>
		<div class="page-inner login_inner">
			<div class="wrap">
				<p class="f36 font-b">忘記密碼</p>
				<div class="login_box">
					<el-form :model="registerFprm" :rules="loginRules" ref="ruleFormRef">
						<el-form-item prop="email">
							<p class="font-r f16">郵箱</p>
							<el-input v-model="registerFprm.email" placeholder="請輸入您的郵箱地址"
								style="height: 75%" />
						</el-form-item>
						<el-form-item prop="code">
							<p class="font-r f16">驗證碼</p>
							<el-input v-model="registerFprm.code" placeholder="請輸入驗證碼"
								style="height: 75%">
								<template #append>
								
									<div style="width:70px;"><span v-if="showText" class="t-c" @click="toGetCode()">获取</span>
									<span v-else class="t-c" style="color: #A7A7A7;">{{ second }}s</span></div>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="newpassword">
							<p class="font-r f16">密碼</p>
							<el-input v-model="registerFprm.newpassword" placeholder="請輸入您的密碼"
								style="height: 75%" show-password="true" />
						</el-form-item>
						<el-form-item prop="confirm">
							<p class="font-r f16">確認密碼</p>
							<el-input v-model="registerFprm.confirm" placeholder="請確認密碼"
								style="height: 75%" show-password="true" />
						</el-form-item>
						<el-form-item>
							<div class="form_btn f18 font-m confirm_btn" @click="toConfirm">確定</div>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div style="height: 20px;"></div>
			<p class="copyright font-r f16" v-html="copyrightInfo.content">
			</p>
		</div>
	</div>
</template>
<script>
	import {
		ElMessage
	} from 'element-plus';
	import {
		userRegister,
		getArticleIinfo,
		emsSend,resetpwd,
		getArticleLists
	} from '@/api/sections'
	export default {
		data() {
			return {
				copyrightInfo: {},
				isAgree: false,
				registerFprm: {
					email: "",
					code: "",
					newpassword: "",
					confirm: "",
				},
				dataInfo: {},
				second: 120,
				showText: true, //判断短信是否发送
				dialogShow: false,
				dialogForm: {},
				loginRules: {
					email: [{
						required: true,
						message: "",
						trigger: "blur"
					}],
					newpassword: [{
						required: true,
						message: "",
						trigger: "blur"
					}],
					confirm: [{
						required: true,
						message: "",
						trigger: "blur"
					}],
					code: [{
						required: true,
						message: "",
						trigger: "blur"
					}],
				}
			}
		},

		methods: {

			toGetCode() {


				emsSend({
					'email': this.registerFprm.email,
					event: 'resetpwd'
				}).then((res) => {
					if (res.code == 1) {



						ElMessage({
							message: res.msg,
							type: 'success'
						});


						var interval = setInterval(() => {
							this.showText = false;
							var times = this.second - 1;
							this.second = times;
						}, 1000);
						setTimeout(() => {
							clearInterval(interval);
							this.second = 60;
							this.showText = true;
						}, 60000);
					} else {


						ElMessage({
							message: res.msg,
							type: 'error'
						});
					}
				})
			},
			toConfirm() {
				this.$refs.ruleFormRef.validate((valid) => {
					if (valid) {
						if (this.registerFprm.newpassword!=this.registerFprm.confirm) {

							ElMessage({
								message: "Two passwords are inconsistent",
								type: 'warning'
							});
							return
						}


						resetpwd(this.registerFprm).then((res) => {
							if (res.code == 1) {
								ElMessage({
									message: res.msg,
									type: 'success'
								});
								this.$router.push({
									path: `/login`,
								});
							} else {


								ElMessage({
									message: res.msg,
									type: 'error'
								});
							}
						})
					} else {
						return false;
					}
				});

			}
		},
		mounted: function() {



			getArticleIinfo({
				id: 744
			}).then((res) => {
				console.log(res, 1111)
				this.dataInfo = res.data

			})
			getArticleLists({
				'cid': 303,
				ext: 'content'
			}).then((res) => {

				this.copyrightInfo = res.data[0]

			})
		},
	}
</script>